<template>
	<view class="scroll-box">
		<scroll-view scroll-x="true">
			<view @click="changeActive(index)" class="tabs_items" v-for="(item, index) in tabBars" :key="item.id">
				<text :class="index === tabIndex ? 'active' : ''">{{ item.name }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		tabBars:Array,
		tabIndex:Number
	},
	data() {
		return {
		};
	},
	methods: {
		changeActive(index) {
			this.$emit('changeIndex',index)
		}
	}
};
</script>

<style lang="less">
.scroll-box {
	scroll-view {
		height: 100rpx;
		border-bottom: 1rpx solid #cccccc;
		white-space: nowrap;
		width: 100%;
		line-height: 100rpx;
		.tabs_items {
			display: inline-block;
			padding: 0 30rpx;
			text {
				padding: 10rpx 10rpx;
			}
		}
	}
}
.active {
	color: red;
	border-bottom: 4rpx solid #fede33;
}
</style>
